<template>
  <div>
    <!-- 顶部操作部分 -->
    <div>
      <ButtonGroup size="default">
       <!-- <Button >查询</Button>-->
       <!-- <Button >重置</Button>-->
        <Button @click="addNewTemplateFlag = true">新增模板</Button>
        <Button >批量删除</Button>
        <Button @click="generateTestPaperFlag = true">生成试卷</Button>
      </ButtonGroup>
      <br><br>
    </div>
    <!-- 搜索条件 -->
    <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
      模板名称:<Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
      创建人:<Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
      考试计划:<Select v-model="searchKey" class="search-col">
        <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
      </Select>
      时间维度:<DatePicker type="daterange" @on-change="handleChange" placeholder="Select date" style="width: 200px"></DatePicker>
      <Button class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
    </div>
    <div style="height: 20px"></div>
    <!-- 表格部分 -->
    <div>
      <Table
        ref="selection"
        :data="insideTableData"
        :columns="insideColumns"
        @on-select="singleSelectionMethod"
        stripe
        border
      >
        <template slot-scope="{ row }" slot="content"></template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
          <Button type="error" size="small" @click="remove(index)" style="margin-right: 5px">删除</Button>
        </template>
      </Table>
    </div>
    <!-- 分页 -->
    <div>
      <Page :total="2" show-sizer show-total />
    </div>
    <!-- 新增模板 -->
    <Modal
      v-model="addNewTemplateFlag"
      title="新增题目"
      loading
      @on-ok="addNewTemplateFlag" width="1000" :styles="{top: '20px'}">
      <!-- 新增的表单 -->
      <div>
        <Form :model="formItem" :label-width="100">
          <FormItem label="模板名称：">
            <Input v-model="formItem.type" placeholder="输入题库" clearable style="width: 30%"/>
          </FormItem>
          <FormItem label="所属计划：">
            <Select v-model="formItem.type" style="width: 30%">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="及格分：">
            <Input v-model="formItem.type" placeholder="输入题库" clearable style="width: 30%"/>
          </FormItem>
          <FormItem label="总分：">
            <Input v-model="formItem.type" placeholder="输入题库" clearable style="width: 30%"/>
          </FormItem>
          <FormItem label="题目总数：">
            <Input v-model="formItem.type" placeholder="输入题库" clearable style="width: 30%"/>
          </FormItem>
          <FormItem label="题目类型：">
            <ButtonGroup size="default">
              <Button type="dashed" @click="handleAdd(1)" icon="md-add">单选题</Button>
              <Button type="dashed" @click="handleAdd(2)" icon="md-add">多选题</Button>
              <Button type="dashed" @click="handleAdd(3)" icon="md-add">判断题</Button>
              <Button type="dashed" @click="handleAdd(4)" icon="md-add">填空题</Button>
              <Button type="dashed" @click="handleAdd(5)" icon="md-add">简答题</Button>
            </ButtonGroup>
          </FormItem>
          <FormItem label="题目设置：">
          </FormItem>
          <FormItem
            v-for="(item, index) in formDynamic.items"
            v-if="item.status"
            :key="index"
            :label="item.kind">
            <Row type="flex" justify="start">
              <Col span="3">
                题库：<Select v-model="item.questionBank" style="width: 65%">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select>
              </Col>
              <Col span="3">
                简单题目数：<Input type="text" v-model="item.simpleQuestionsNum" placeholder="Enter something..." style="width: 30%"></Input>
              </Col>
              <Col span="2">
                分数：<Input type="text" v-model="item.simpleGrade" placeholder="Enter something..." style="width: 45%"></Input>
              </Col>
              <Col span="3">
                普通题目数：<Input type="text" v-model="item.commonQuestionsNum" placeholder="Enter something..." style="width: 30%"></Input>
              </Col>
              <Col span="2">
                分数：<Input type="text" v-model="item.commonGrade" placeholder="Enter something..." style="width: 45%"></Input>
              </Col>
              <Col span="3">
                困难题目数：<Input type="text" v-model="item.diffQuestionsNum" placeholder="Enter something..." style="width: 30%"></Input>
              </Col>
              <Col span="2">
                分数：<Input type="text" v-model="item.diffGrade" placeholder="Enter something..." style="width: 45%"></Input>
              </Col>
              <Col span="4" offset="1">
                <Button type="error" @click="handleRemove(index)">Delete</Button>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- 生成试卷弹窗 -->
    <Modal
      v-model="generateTestPaperFlag"
      title="生成试卷"
      loading
      @on-ok="generateTestPaperMethod">
      <!-- 新增的表单 -->
      <div>
        <Form :model="formItem" :label-width="100">
          <FormItem label="试卷名称：">
            <Input v-model="formItem.type" placeholder="输入试卷名称" clearable style="width: 50%"/>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import './index.less'
export default {
  name: 'mbgl',
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    size: String,
    width: {
      type: [Number, String]
    },
    height: {
      type: [Number, String]
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    highlightRow: {
      type: Boolean,
      default: false
    },
    rowClassName: {
      type: Function,
      default () {
        return ''
      }
    },
    context: {
      type: Object
    },
    noDataText: {
      type: String
    },
    noFilteredDataText: {
      type: String
    },
    disabledHover: {
      type: Boolean
    },
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * @description 全局设置是否可编辑
     */
    editable: {
      type: Boolean,
      default: false
    },
    /**
     * @description 是否可搜索
     */
    searchable: {
      type: Boolean,
      default: true
    },
    /**
     * @description 搜索控件所在位置，'top' / 'bottom'
     */
    searchPlace: {
      type: String,
      default: 'top'
    }
  },
  /**
   * Events
   * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
   * @on-cancel-edit 返回值 {Object} 同上
   * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
   */
  data () {
    return {
      dataValue: null, // 时间维度选择
      insideColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          key: 'templateName',
          title: '模板名称'
        },
        {
          key: 'subordinateToPlan',
          title: '所属计划'
        },
        {
          key: 'totalPoints',
          title: '总分'
        },
        {
          key: 'passingGrade',
          title: '及格分'
        },
        {
          key: 'creator',
          title: '创建人'
        },
        {
          key: 'createTime',
          title: '创建时间'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ], // 表格列数据
      insideTableData: [
        {
          templateName: '模板名称1',
          subordinateToPlan: '所属计划1',
          totalPoints: '总分1',
          passingGrade: '及格分1',
          creator: '创建人1',
          createTime: '创建时间1',
        },
        {
          templateName: '模板名称2',
          subordinateToPlan: '所属计划2',
          totalPoints: '总分2',
          passingGrade: '及格分2',
          creator: '创建人2',
          createTime: '创建时间2',
        },
        {
          templateName: '模板名称3',
          subordinateToPlan: '所属计划3',
          totalPoints: '总分3',
          passingGrade: '及格分3',
          creator: '创建人3',
          createTime: '创建时间3',
        }
      ], // 表格记录数据
      addNewTemplateFlag: false,  //新增模板弹窗标志位
      formItem: {
        type: '',
        diff: '',
        content: '',
        answer: '',
        analysis:''
      },
      index: 1,
      formDynamic: {
        items: [
          {
            kind: '单选题', // 题目类型
            questionBank: '', // 题库
            simpleQuestionsNum: '', // 简单题目数
            simpleGrade: '', // 简单题目分数
            commonQuestionsNum: '', // 普通题目数
            commonGrade: '', // 普通题目分数
            diffQuestionsNum: '', //困难题目数
            diffGrade: '', // 困难题目分数
            index: 1,
            status: 1
          }
        ]
      },
      generateTestPaperFlag: false // 生成试卷的弹窗标志
    }
  },
  methods: {
    handleChange(daterange) {
      this.dataValue = daterange;
      console.log("2222:"+daterange); // 2222:2020-03-10,2020-03-14
    },
    show (index) {
      this.$Modal.info({
        title: '题目详情',
        content: `模板名称：${this.insideTableData[index].templateName}<br>
                  所属计划：${this.insideTableData[index].subordinateToPlan}<br>
                  总分：${this.insideTableData[index].totalPoints}<br>
                  及格分：${this.insideTableData[index].passingGrade}<br>
                  创建人：${this.insideTableData[index].creator}<br>
                  创建时间：${this.insideTableData[index].createTime}<br>`
      })
    },
    remove (index) {
      console.log("ewew:"+this.insideTableData[index].templateName)
      this.insideTableData.splice(index,1);
    },
    /* 选项删除 */
    handleRemove (index) {
      this.formDynamic.items[index].status = 0;
      this.index--;
    },
    /* 题目增加 */
    handleAdd (kind) {
      let type;
      if (kind == 1){
        type = '单选题';
      } else if (kind ==2) {
        type = '多选题';
      } else if (kind ==3) {
        type = '判断题';
      } else if (kind ==4) {
        type = '填空题';
      } else if (kind ==5) {
        type = '简答题';
      }
      this.index++;
      this.formDynamic.items.push({
        kind: type,
        questionBank: '', // 题库
        simpleQuestionsNum: '', // 简单题目数
        simpleGrade: '', // 简单题目分数
        commonQuestionsNum: '', // 普通题目数
        commonGrade: '', // 普通题目分数
        diffQuestionsNum: '', //困难题目数
        diffGrade: '', // 困难题目分数
        index: this.index,
        status: 1
      });
    },
    /* 单选某一项 */
    singleSelectionMethod (selection,row) {
      // 可以得到表格选中的记录
      console.log("fdfd:"+selection ,row);
    },
    /* 生成试卷的逻辑 */
    generateTestPaperMethod () {

    }
  }
}
</script>
